<script setup>
import { menuConfig } from "@/router";
import { useRouter } from "vue-router";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

// 获取路由实例
const router = useRouter();

const icons = ElementPlusIconsVue; // 获取图标库

// 点击菜单项时执行路由跳转
function pushClick(path) {
    router.push(path);
}
</script>

<template>
    <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        :collapse="true"
        unique-opened
    >
        <!-- 首页 -->
        <!-- 首页菜单项 -->
        <el-menu-item index="home" @click="() => pushClick('/')">
            <el-icon>
                <HomeFilled />
            </el-icon>
            <span>首页</span>
        </el-menu-item>

        <!-- 使用 menuConfig 渲染菜单 -->
        <el-sub-menu
            v-for="menu in menuConfig"
            :key="menu.path"
            :index="menu.path"
        >
            <template #title>
                <!-- 动态渲染图标 -->
                <el-icon v-if="icons[menu.icon]">
                    <component :is="icons[menu.icon]" />
                </el-icon>
                <span>{{ menu.label }}</span>
            </template>
            <!-- 三级菜单项，点击时调用 pushClick 跳转 -->
            <el-menu-item
                v-for="subMenu in menu.children"
                :key="subMenu.path"
                :index="subMenu.path"
                @click="pushClick(subMenu.path)"
            >
                {{ subMenu.label }}
            </el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>

<style scoped>
.el-menu{
    border-right: none;
}
</style>
